<template>
  <!--教师管理部分-->
  <div class="Con">
    <div class="T-1">
      <div style="margin-left: 20px">
        <!--添加-->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="drawer = true"
          >添加</el-button
        >
      </div>

      <div style="display: flex; justify-content: end; margin-right: 20px">
        <el-input
          v-model="name"
          placeholder="请输入姓名"
          size="small"
          style="width: 40%"
        ></el-input
        ><!--姓名搜索-->
        <span style="color: rgb(146, 146, 146)"> &nbsp;-&nbsp;</span>
        <el-input
          v-model="no"
          placeholder="请输入工号"
          size="small"
          style="width: 40%; margin-right: 10px"
        ></el-input
        ><!--学号搜索-->
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search()"
          >搜索</el-button
        >
      </div>
    </div>

    <div class="T-2">
      <!--表格-->
      <el-table :data="tableData" style="width: 100%" height="100%">
        <el-table-column label="教师工号" prop="tid"> </el-table-column>
        <el-table-column label="教师姓名" prop="tname"> </el-table-column>
        <el-table-column label="教师手机" prop="ttelephone"> </el-table-column>
        <el-table-column label="学院" prop="tinstitude"> </el-table-column>

        <el-table-column label="教师签名" prop="tpicture">
          <template slot-scope="scope"
            ><!--slot--->
            <img
              :src="scope.row.tpicture"
              style="
                width: 75%;
                height: 70px;
                box-shadow: 1px 1px 5px rgb(146, 146, 146);
              "
              alt="image"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删&nbsp;除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="T-3">
      <!--分页--><!--   :current-page.sync="pageNum" -->
      <el-pagination
        background
        layout="total,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        @current-change="changePage"
      >
      </el-pagination>
      <p style="font-size: 13px; text-align: right; color: #3d59ab">
        * 当
        <span style="color: darkblue; font-weight: 800">教师工号 </span>和<span
          style="color: darkblue; font-weight: 800"
        >
          教师姓名
        </span>
        都不输入数据，查询结果为全部数据！
      </p>
    </div>

    <!--弹出抽屉-->
    <el-drawer
      title="教师注册"
      size="30%"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div class="Drawer">
        <div class="Drawer-img">
          <img src="../assets/img/Teacher-RegFrom.jpg" />
        </div>
        <div class="Drawer-text">教师注册二维码</div>
        <div class="Drawer-url">
          URL地址:<a href="http://114.116.33.6:8899/regfrom">
            http://114.116.33.6:8899/regfrom</a
          >
        </div>
        <div class="Drawer-look">
          <p style="font-size: 18px; font-weight: 600; color: crimson">注意:</p>
          <p>
            &nbsp;&nbsp;&nbsp;*
            管理员不可以直接手动添加教师，若系统要添加教师，请管理员把上面二维码发放给老师，让老师自行注册！
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;*
            如果教师要重新修改签名画板，建议管理员把该教师的信息删除，然后发放以上二维码，让该老师重新注册！
          </p>
        </div>
      </div>
    </el-drawer>
  </div>
  <!--Con容器-->
</template>

<script>
import { axios1 } from "@/network";
import Qs from "qs";

export default {
  data() {
    return {
      name: "", //名字搜索
      no: "", //工号搜索
      tableData: [], //具体数据
      //tableData2:[],//查询数据
      pageNum: 1, //页码
      pageSize: 6, //
      text: "",
      total: 0, //数据总数
      drawer: false, //弹窗
      direction: "ltr",
    };
  },
  methods: {
    handleDelete(index, row) {
      //删除数据方法
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.tid);
          this.deleteInfo(row.tid);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查询的方法
    search() {
      let data2 = {
        //定义要发送的数据
        tid: this.no,
        tname: this.name,
      };
      if (this.no == "" && this.name == "") {
        //如果没有填写查询数据，则表示全部数据
        this.updateInfo();
        this.$message({
          showClose: true,
          message: "查询成功",
          type: "success",
          duration: 600,
        });
        return;
      }
      axios1({
        url: "/teacher/vagueSelect",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded ", //application/x-www-form-urlencoded //application/json
          token: this.$store.state.token,
        },
        data: Qs.stringify(data2),
      })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.data.length;
          //console.log(res)
          this.$message({
            showClose: true,
            message: "查询成功！",
            type: "success",
            duration: 1000,
          });
          console.log(res.data.data);
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: "查询失败，请检查错误",
            type: "error",
            duration: 1000,
          });
          console.log("错误" + res);
        });
    },

    changePage(x) {
      //分页方法
      this.updateInfo();
    },

    updateInfo() {
      //ajax发送请求//获取全部数据

      let data = {
        //定义要发送的数据
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        text: this.text,
      };

      axios1({
        url: "/teacher/page",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded ", //application/x-www-form-urlencoded //application/json
          token: this.$store.state.token,
        },
        data: Qs.stringify(data), //{
        //pageNum:1,
        //pageSize:4,
        // text:"小"
        //param
        //}
      })
        .then((res) => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;

          //console.log(res);
        }) //正确
        .catch((res) => {
          console.log("错误" + res);
        }); //错误
    },

    deleteInfo(tid1) {
      let data3 = {
        //定义要发送的数据
        tid: tid1,
      };
      axios1({
        url: "/teacher/deleteTeacher",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", //application/x-www-form-urlencoded //application/json
          token: this.$store.state.token,
        },
        data: Qs.stringify(data3),
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          location.reload(); //刷新页面
          console.log("删除成功");
        })
        .catch((res) => {
          console.log(res);
          this.$message({
            type: "error",
            message: "删除失败！请重新操作",
          });
        });
    },
  }, //axios

  //添加教师
  addInfo() {
    console.log("add");
  },
  created() {
    this.updateInfo(); //发送请求，获得全部数据
  },
};
</script>

<style scoped>
.Con {
  background-color: whitesmoke;
  width: 100%;
  height: 98%;
  box-shadow: 1px 1px 10px rgb(146, 146, 146);
  margin: auto;
  margin-top: 1%;
}
.T-1 {
  width: 100%;
  height: 10%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px rgb(224, 224, 222);
}
.T-2 {
  width: 100%;
  height: 75%;

  margin-top: 1%;
}
.T-3 {
  width: 100%;
  height: 10%;

  margin-top: 1%;
  padding-top: 6px;
}
.Drawer {
  width: 100%;
  height: 100%;

  padding-top: 1px;
}
.Drawer-img {
  width: 200px;
  height: 200px;
  margin: auto;

  margin-top: 80px;
}
.Drawer-img img {
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 5px rgb(134, 134, 134);
}
.Drawer-text {
  width: 100%;
  height: 20px;

  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgb(88, 88, 88);
}
.Drawer-url {
  width: 100%;
  height: 40px;

  margin-top: 20px;
  text-align: center;
  line-height: 40px;
  color: rgb(51, 51, 51);
  font-weight: 600;
}
.Drawer-url a {
  text-decoration: none;
  color: darkblue;
  font-size: 14px;
}
.Drawer-url a:hover {
  color: blueviolet;
}
.Drawer-look {
  width: 100%;
  height: 300px;

  margin-top: 50px;
  border-top: 1px solid rgb(201, 201, 201);
}
.Drawer-look p {
  padding: 8px;
  font-size: 15px;
  color: darkblue;
  font-weight: 600;
}
</style>
